<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.main{
				text-align: center;
				width: 200px;
				height: 600px;
				margin: 0 auto;
			}
			
			.main .blood{
				border: 1px solid black;
				background: white;
				height: 25px;
				margin-bottom: 10px;
			}
			
			.main .blood .red{
				background-color: red;
				height: 24px;
				width: 100%;
			}
			
		</style>
		
		<script>
			window.onload = function()
			{
				let hite = document.querySelector('#hite');
				let restar = document.querySelector('#restar');
				let red = document.querySelector('.red');
				let white = document.querySelector('.white');
				let a = 100;
				let img = document.querySelector('img');
				
				hite.onclick = function()
				{
					a = a - 10;
					red.style.width = a + '%';
					
					if(a == 0)
					{
						img.src = './img/1.png';
						hite.style.display = 'none';
					}
				}
				
				restar.onclick = function()
				{
					hite.style.display = 'inline-block';
					red.style.width = '100%';
					img.src = './img/a5b818f12ab716c0d4783d395bf2bdf.png';
					a = 100;
				}
			}
		</script>
	</head>
	<body>
		<div class="main">
			<img src="./img/a5b818f12ab716c0d4783d395bf2bdf.png"/>
			
			<div class="blood">
				<div class="red"></div>
			</div>
			
			<button id="hite">击打</button>
			<button id="restar">重玩</button>
		</div>
	</body>
</html>